<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>角色管理</title>
    <th:block th:replace="componet::reference"></th:block>
</head>
<body>
<div class="x-nav">
          <span class="layui-breadcrumb">
              <a href="">系统管理</a>
            <a>
              <cite>角色管理</cite></a>
          </span>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"
       onclick="location.reload()" title="刷新">
        <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i></a>
</div>
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-body ">



                    <form class="layui-form" lay-filter="formTest">
                        <div class="layui-inline">
                            <label class="layui-form-label" for="roleName">角色名称 : </label>
                            <div class="layui-inline">
                                <input class="layui-input" autocomplete="off" placeholder="角色名称" name="roleName"
                                       id="roleName">
                            </div>
                        </div>

                        <div class="layui-inline">
                            <label class="layui-form-label">启用状态 : </label>
                            <div class="layui-input-block">
                                <select name="isStart" lay-verify="required">
                                    <option value="" selected disabled>--请选择--</option>
                                    <option value="0">禁用</option>
                                    <option value="1">启用</option>
                                </select>
                            </div>
                        </div>

                        <div class="layui-inline">
                            <button class="layui-btn" lay-submit lay-filter="search"><i
                                    class="layui-icon">&#xe615;</i></button>
                        </div>
                    </form>
                </div>
                <div class="layui-card-header">
                    <button class="layui-btn" id="addRole"><i
                            class="layui-icon"></i>添加
                    </button>
                </div>


                <div class="layui-card-body layui-table-body layui-table-main">
                    <!--表格以及表格组件-->
                    <script type="text/html" id="switchTpl">
                        <!-- 这里的 checked 的状态只是演示 -->
                        <input type="checkbox" name="isOpen" value="{{d.id}}" lay-skin="switch" lay-text="启用|禁用" lay-filter="isOpen" {{ d.isStart == 1 ? 'checked' : '' }}>
                    </script>

                    <script type="text/html" id="barDemo">
                        <a class="layui-btn layui-btn-sm" lay-event="edit">编辑</a>
                        <a class="layui-btn layui-btn-danger layui-btn-sm" lay-event="del">删除</a>
                    </script>

                    <table class="layui-hide" id="test" lay-filter="test"></table>

                </div>
                <div class="layui-card-body ">
                    <div class="page">
                        <div id="rolePage">

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script>
    layui.use(['table', 'form','layer'], function () {


        var form = layui.form,
            table = layui.table,
            layer = layui.layer;

        $("#addRole").click(function () {
            xadmin.open('添加角色','/role/addRole',400,300);
        });


        //表单数据获取
        var getTable = table.render({
            elem: '#test'   //目标对象
            , url: '/role/roleListData'//数据接口
            , parseData: function (res) { //将原始数据解析成 table 组件所规定的数据
                return {
                    "code": 200, //解析接口状态
                    "msg": res.message, //解析提示文本
                    "count": res.total, //解析数据长度
                    "data": res.records //解析数据列表
                };
            }
            ,request: {
                pageName: 'currentPage' //页码的参数名称，默认：page
                ,limitName: 'pageSize' //每页数据量的参数名，默认：limit
            }
            , page: true
            , title: '用户数据表' ///数据导出时的标题
            , text: {
                none: "暂无数据"
            }
            /*/**/
            , cols: [
                [ //列数据
                    {field: 'id', title: '角色编号' , align : "center"}
                    , {field: 'roleName', title: '角色名称' , align : "center"}
                    , {field: 'createdBy', title: '创建人' , align : "center"}
                    , {field: 'creationTime', title: '更新时间' , align : "center"}
                    , {field: 'isStart', title: '状态' , align : "center" , templet: '#switchTpl', unresize: true}
                    , {fixed: 'right', title: '操作' , align : "center", toolbar: '#barDemo'}
                ]
            ]
            /*  */

            , response: {
                statusCode: 200 //重新规定成功的状态码为 200，table 组件默认为 0
            }

        });

        //监听禁用启用操作
        form.on('switch(isOpen)', function(obj){
            var value = this.value;
            if(obj.elem.checked){
                //设置启用
                $.post(`/role/setStart/${value}/1`,function (data) {
                    if(data){
                        layer.msg("已设置为启用",{
                            icon : 1
                        });
                    }else{

                        obj.elem.checked = !obj.elem.checked;
                        form.render('checkbox');// 必须重新渲染，这个很重要
                        layer.msg("操作失败",{
                            icon : 2
                        });

                    }
                });

            }else {
                //设置禁用
                $.post(`/role/setStart/${value}/0`,function (data) {
                    if(data){
                        layer.msg("已设置为禁用",{
                            icon : 4
                        });
                    }else{
                        obj.elem.checked = !obj.elem.checked;
                        form.render('checkbox');// 必须重新渲染，这个很重要
                        layer.msg("操作失败",{
                            icon : 2
                        });
                    }
                });
            }
        });

        //监听工具条
        table.on('tool(test)', function(obj){
            var data = obj.data;

            if(obj.event === 'del'){
                layer.confirm('真的要删除这个角色吗？', function(index){
                    $.ajax({
                        type:"POST",
                        url:`/role/del/${data.id}`,
                        success:function(resp,status){
                            if(data){
                                obj.del();//在页面上更新
                                layer.msg("删除成功",{
                                    icon : 1
                                });
                            }else {
                                layer.msg("删除失败",{
                                    icon : 2
                                });
                            }
                        },
                        error:function(xhr,errorText,errorType){
                            layer.msg("删除失败",{
                                icon : 2
                            });
                        },
                        complete:function(){
                            //do something
                        }
                    });
                    layer.close(index);

                });
            } else if(obj.event === 'edit'){
                xadmin.open('编辑角色',`/role/updateRole/${data.id}`,400,300);
            }

        });


        form.on('submit(search)',function (data) {
            //设置条件
            //重新加载
            getTable.reload({
                 where : {
                    roleName : data.field.roleName,
                    isStart : data.field.isStart
                 }
                ,page : {
                    curr : 1
                }
            });
            return false;
        });


    });

</script>
</html>